<template>
  <div class="follow-list">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        class="follow-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <van-image
          class="avatar"
          round
          :src="item.baseUrl+item.photo"
          fit="cover"
          slot="icon"
          @click="$router.push({
            name: 'user',
            params: {
              userid: item.userid
            }
          })"
        />
        <div
          class="title"
          slot="title"
        >{{ item.name.trim() || '用户' }}</div>
        <div
          class="label"
          slot="label"
        >粉丝数：{{ item.fans.length }}</div>
        <follow-user
          :userid="item.userid"
          v-model='item.is_followed'
        >
          <span>{{ item.is_followed ? '已关注' : '关注' }}</span>
        </follow-user>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getuserfans, getuserfollow } from '@/api/user'
import FollowUser from '@/components/follow-user'

export default {
  name: 'FollowList',
  components: {
    FollowUser
  },
  props: {
    // 默认获取用户关注列表，如果需要获取粉丝列表则指定 followers 为 true
    followers: {
      type: Boolean,
      default: false
    },
    userid: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      followPage: 0
    }
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () { },
  methods: {
    async onLoad () {
      try {
        const res = await (this.followers
          ? getuserfans(this.userid, ++this.followPage)
          : getuserfollow(this.userid, ++this.followPage))
        const followList = res.data.data
        this.list.push(...followList)
        this.loading = false
        if (followList.length) {
          this.page++
        } else {
          this.finished = true
        }
      } catch (err) {
        this.$toast('数据获取失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.follow-list {
  position: fixed;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 0;
  overflow-y: auto;
}

.follow-item {
  align-items: center;
  .avatar {
    width: 50px;
    height: 50px;
    margin-right: 13px;
  }
  .title {
    font-size: 14px;
  }
  .label {
    font-size: 12px;
    color: #999999;
  }
  .van-cell__title {
    display: flex;
    flex-direction: column;
    align-items: baseline;
  }
}
</style>
